<template>
  <div>
    <div class="weekend-title">热销推荐</div>
    <ul class="weekend-list">
      <router-link class="weekend-item border-bottom"
                   v-for="(item, index) of recommendList"
                   tag="li"
                   :to="'/detail/' + index"
                   :key="index">
        <img class="item-image" :src="item.imgUri" >
        <div class="item-content">
          <div class="item-title">{{ item.title }}</div>
          <div class="item-desc">{{ item.desc }}</div>
          <div class="item-price">
            <span class="item-price-mark">￥</span>
            <span class="item-price-number">{{ item.price }}</span>
            <span class="item-price-start">起</span>
          </div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "HomeRecommend",
    props: {
      recommendList: Array
    },
    data() {
      return {

      }
    }
  }
</script>

<style lang="scss" scoped>

  @import "~styles/mixins.scss";

  .weekend-title {
    margin-top: .2rem;
    line-height: .8rem;
    background-color: #eeeeee;
    text-indent: .2rem;
  }

  .weekend-list {
    .weekend-item {
      height: 1.9rem;
      display: flex;
      .item-image {
        width: 1.7rem;
        height: 1.7rem;
        padding: .1rem;
      }

      .item-content {
        flex: 1;
        padding: .1rem .16rem;
        min-width: 0;
        .item-title {
          line-height: 0.54rem;
          font-size: .32rem;
          @include ellipsis
        }

        .item-desc {
          color: #bbb;
          line-height: 0.4rem;
          @include ellipsis
        }

        .item-price {
          line-height: 0.76rem;
          font-size: .22rem;
          .item-price-mark {
            color: #f89b1e;
          }
          .item-price-number {
            font-size: .40rem;
            color: #f89b1e;
          }
          .item-price-start {
            display: inline-block;
            color: #CCCCCC;
            text-indent: .1rem;
          }
        }
      }
    }
  }
</style>